<template>
	<view class="list-box">
		<!-- 标题 -->
		<view class="title space-between center">
			<view>
				<text class="name">{{name}}</text>
				<text class="word" v-if="word">{{word}}</text>
			</view>
			<view class="all">
				<text>全部</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<!-- 滑块内容，列表 -->
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			name: { // 名称
				type: String,
				default: '热门推荐'
			},
			word: { // 高亮单词，如： 'HOT'
				type: String,
				default: null
			}
		},
	}
</script>

<style lang="scss">
	.list-box {
		margin-top: 60rpx;

		.name {
			font-size: 38rpx;
			font-weight: 500;
			color: #303133;
			margin-right: 10rpx;
		}

		.word {
			/* 从左往右渐变 */
			background-image: linear-gradient(to right, $mxg-color-orange, $mxg-text-color-red);
			font-size: 20rpx;
			color: #fff;
			padding: 0 10rpx;
			border-radius: 30rpx 30rpx 30rpx 0;
		}

		.all {
			font-weight: normal;
			color: $mxg-text-color-grey;
			font-size: 28rpx;

			.iconfont {
				font-size: 25rpx;
			}
		}
	}
</style>
